<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //创建一片雪花
        function createOneSnow() {
            var snowDiv = document.createElement('div');
            // snowDiv.style.width = "200px";
            // snowDiv.style.height = "200px";
            // snowDiv.style.backgroundColor = "red";
            // snowDiv.style.margin = "10px";
            snowDiv.innerHTML = '<img src="./snow.png" width="30px" height="30px"/>'

            var angel = parseInt(Math.random() * 360);
            snowDiv.style.transform = "rotate(" + angel + "deg)";
            snowDiv.style.position = 'fixed';
            snowDiv.style.top = parseInt(Math.random() * window.innerHeight) + 'px';
            snowDiv.style.left = parseInt(Math.random() * window.innerWidth) + 'px';

            document.body.appendChild(snowDiv);

            //获取元素当前位置
        }

        //创建很多雪花
        function createManySnow() {
            for (var i = 0; i < 300; i++) {
                createOneSnow();
            }
            document.getElementById('startBtn').removeAttribute('disabled', 'disabled')
            document.getElementById('addBtn').setAttribute('disabled', 'disabled')
        }

        //删除全部雪花
        function deleteSnow() {
            var snowDivs = document.getElementsByTagName('div');
            var len = snowDivs.length;
            for (var i = 0; i < len; i++) {
                console.log(snowDivs[i]);
                snowDivs[0].remove();
                // console.log(snowDivs.length);
            }
            document.getElementById('addBtn').removeAttribute('disabled', 'disabled')
            document.getElementById('startBtn').setAttribute('disabled', 'disabled')
        }

        //雪花飞起来
        function startFly() {
            var snowDivs = document.getElementsByTagName('div');
            for (var i = 0; i < snowDivs.length; i++) {
                var speed = parseInt(Math.random() * 10)
                snowDivs[i].style.top = snowDivs[i].offsetTop + speed + "px";
                if (snowDivs[i].offsetTop >= window.innerHeight) {
                    snowDivs[i].remove();
                    createOneSnow();
                }
            }
            document.getElementById('startBtn').setAttribute('disabled', 'disabled')
            document.getElementById('pauseBtn').removeAttribute('disabled', 'disabled')
            myTimer = setTimeout(startFly, 50);
        }

        //暂停飞舞
        function pauseFly() {
            clearTimeout(myTimer);
            document.getElementById('pauseBtn').setAttribute('disabled', 'disabled')
            document.getElementById('startBtn').removeAttribute('disabled', 'disabled')
        }
    </script>
    <style>
        body {
            background-image: url("./bg.jpeg");
            margin: 0;
            background-size: cover;
        }
    </style>
</head>
<body">
    <button onclick="createManySnow()" id="addBtn">新增</button>
    <button onclick="startFly()" id="startBtn" disabled="disabled">开始</button>
    <button onclick="pauseFly()" id="pauseBtn" disabled="disabled">暂停</button>
    <input type="button" value="删除" onclick="deleteSnow()">

    </body>

</html>